<template>
  <!--表格内容栏-->
  <cm-table
    ref="dataTable"
    :pkName="props.pkName"
    :filters="props.filters"
    :filterFields="props.filterFields"
    :columns="props.columns"
    @handleTableOperator="handleTableOperator"
    @handleCellOperator="handleCellOperator"
  />

  <!--新增/编辑/查看界面-->
  <el-dialog
    v-if="dialogVisible"
    v-model="dialogVisible"
    :width="props.dialogWidth"
    :title="dialogTitle"
    :close-on-click-modal="false"
    destroy-on-close
    draggable
  >
    <cm-form
      ref="dataForm"
      v-model="formData"
      :fields="props.columns"
      :rules="props.rules"
      :disabled="!dialogEdit"
      :cols="props.formCols"
    />
    <template #footer>
      <el-button
        v-if="dialogEdit"
        size="large"
        @click="dialogVisible=false"
        type="info"
      >取消</el-button>
      <el-button
        v-if="dialogEdit"
        size="large"
        type="primary"
        @click="submitForm"
        :loading="editLoading"
      >提交</el-button>
      <el-button
        v-if="!dialogEdit"
        size="large"
        @click="dialogVisible=false"
        type="info"
      >关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref} from 'vue';
import {ElMessage, ElMessageBox} from 'element-plus';
import api from '@/http/api';

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {}
  },
  pkName: {
    type: String,
    default: 'id'
  },
  filters: {
    type: Object,
    default: () => {}
  },
  filterFields: {
    type: Array,
    default: () => []
  },
  columns: {
    type: Array,
    default: () => []
  },
  rules: {
    type: Object,
    default: () => {}
  },
  dialogWidth: {
    type: String,
    default: '650px'
  },
  formCols: { // 表单一行有多少个元素
    type: Number,
    default: 1
  }
});

const dataTable = ref(); // 弹窗表单数据
const dataForm = ref(); // 弹窗表单数据
const formData = ref({}); // 弹窗表单数据
const dialogTitle = ref(''); // 新增/编辑/查看弹窗标题
const dialogVisible = ref(false); // 弹窗是否显示
const editLoading = ref(false); // 弹窗表单提交状态
const dialogEdit = ref(false); // 弹窗是否编辑

const handleCellOperator = (property, value, row) => {
  formData.value = Object.assign({}, row);
  dialogVisible.value = true;
  dialogEdit.value = false;
  dialogTitle.value = "查看";
};

// 显示操作界面
const handleTableOperator = (button, row) => {
  dialogVisible.value = true;
  dialogEdit.value = true;
  dialogTitle.value = button.name;

  if (button.buttonType === 'edit') {
    formData.value = Object.assign({}, row, {button: button});
  } else {
    formData.value = {button: button};
  }
};

// 表单提交
const submitForm = () => {
  dataForm.value && dataForm.value.validate((valid) => {
    if (valid) {
      ElMessageBox.confirm('请确认是否提交？', '提示', {type: 'info'}).then(() => {
        editLoading.value = true;
        api.post(formData.value.button.dataDestUrl, formData.value).then(res => {
          ElMessage.success(res.message);
          dialogVisible.value = false;
          dataTable.value.findPage();
          editLoading.value = false;
        }).catch(() => {
          editLoading.value = false;
        })
      }).catch(()=>{});
    } else {
      ElMessage.error('数据录入不正确，请重新检查！');
    }
  })
};

const findPage = () => {
  dataTable.value.findPage();
};

defineExpose({ findPage })
</script>